import { KeyOutlined, LogoutOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Menu, Spin } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import React from 'react';
import { connect } from 'dva';
import Router from 'umi/router';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import { loginOut } from '@/services/user'
import UpdatePassword from "@/components/GlobalHeader/UpdatePassword";
import Modal from "antd/es/modal";
import UserManage from "@/components/GlobalHeader/UserManage";

class AvatarDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = ({
      passwordUpdateVisible: false,
      userManageVisible: false,
    })
  }

  componentDidMount() {
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({
        type: 'user/fetchCurrent',
        callback: res => {
          if (!res || !res.userId) Router.push(`/user/login`);
        }
      });
    }
  }

  onMenuClick = event => {
    const { key } = event;

    if (key === 'logout') {
      loginOut().then(res => {
        if (res.retCode === '0') {
          sessionStorage.clear();
          Router.push(`/user/login`);
        }
      })
    }
    if (key === 'update'){
      this.setState({passwordUpdateVisible:true})
    }
    if (key === 'userManage'){
      this.setState({userManageVisible:true})
    }
  };
  // 关闭弹框
  handleCancel(key) {
    switch (key) {
      case 'userManage':
        this.setState({
          userManageVisible: false
        });
        break;
      case 'updatePassword':
        this.setState({
          passwordUpdateVisible: false
        });
        break;
      default:
    }
  }

  render() {
    const {
      currentUser = {
        avatar: '',
        username: '',
      },
      menu,
    } = this.props;
    // const isRoot = currentUser && currentUser.kgdRole === "ROOT";
    // 获取按钮权限列表
    const buttonList = sessionStorage.getItem('buttonList')
    // 用户
    let isRoot = buttonList && buttonList.indexOf('root') !== -1;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {/* {isRoot && (
          <Menu.Item key="center">
            <Icon type="user" />
            <FormattedMessage id="menu.account.center" defaultMessage="account center" />
          </Menu.Item>
        )}
        {isRoot && (
          <Menu.Item key="settings">
            <Icon type="setting" />
            <FormattedMessage id="menu.account.settings" defaultMessage="account settings" />
          </Menu.Item>
        )}
        {isRoot && <Menu.Divider />} */}
        <Menu.Item key="update">
          <span>
           <KeyOutlined />
           <span style={{ margin: "0 5px 0 7px" }}>修改密码</span>
          </span>
        </Menu.Item>
        {isRoot && <Menu.Item key="userManage">
          <span>
           <SettingOutlined />
           <span style={{margin: "0 5px 0 7px"}}>管理用户</span>
          </span>
        </Menu.Item>}
        <Menu.Item key="logout">
          <span>
           <LogoutOutlined />
           <span style={{ margin: "0 5px 0 7px" }}>退出登录</span>
          </span>
        </Menu.Item>
      </Menu>
    );

    return (
      <>
        {!window.isHidePublishButton ? currentUser && currentUser.username
          ?
          <HeaderDropdown overlay={menuHeaderDropdown} trigger={['click']}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar}
                  src={currentUser.imageUrl || 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'}
                  alt="avatar"/>
          <span className={styles.name}>{currentUser.username}</span>
        </span>
          </HeaderDropdown>
          : <Spin size="small" style={{margin: '0 8px'}}/> : <div></div>}
        {this.state.passwordUpdateVisible && <UpdatePassword handleCancel={this.handleCancel.bind(this, 'updatePassword')} passwordUpdateVisible={this.state.passwordUpdateVisible} />
        }
        <Modal visible={this.state.userManageVisible} footer={null} title={"用户管理"} maskClosable={false}
               onCancel={this.handleCancel.bind(this, 'userManage')} style={{ padding: '10px 5px', minWidth: "700px" }}>
          <div>
            <UserManage />
          </div>
        </Modal>
      </>
    )
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
